<template>
  <div ref="dom" class="charts chart-pie"></div>
</template>

<script>
import echarts from 'echarts';
import tdTheme from './theme.json';
import { on, off } from '@/libs/tools';
echarts.registerTheme('tdTheme', tdTheme);
export default {
  name: 'ChartPie',
  props: {
    value: Array,
    text: String,
    subtext: Boolean
  },
  data () {
    return {
      valueMy: this.value,
      option: {
        title: {
          text: this.text,
          subtext: this.subtext ? '支付和退款的笔数比例 \n (只统计成功的)' : '支付和退款的金额比例 \n (只统计成功的)',
          x: 'center',
          textStyle: {
            color: '#000',
          },
          subtextStyle: {
            color: '#999',
            fontSize: 14

          }
        },
        tooltip: {
          trigger: 'item',
          //formatter: '{b} : {c} ({d}%)'
          formatter: function (params) {
            console.log('formatter:',params)
            const isInteger=params.data?params.data.isInteger:false
            let num=params.value||0
            if (num) {
              if (isNaN(num)) {
                console.log('金额中含有不能识别的字符',num)
                return num;
              }
              num = typeof num == 'string' ? parseFloat(num) : num // 判断是否是字符串如果是字符串转成数字
              num = num.toFixed(2); // 保留两位
              num = parseFloat(num); // 转成数字
              num = num.toLocaleString(); // 转成金额显示模式
              // 判断是否有小数
              debugger
              if (num.indexOf('.') === -1) {
                num = num + '.00';
              }
              if(isInteger){
                num= num.split('.')[0]
              }
            } else {
               num = 0;
            }
            return `${params.name} : ${num} (${params.percent}%)`
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [],
          show: false
        },
        series: [
          {
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
          },
        ]
      },
      dom: null
    }
  },
  methods: {
    resize () {
      this.dom.resize();
    },
    amountHandler(num,return_integer){
      try {
        if (num) {
          if (isNaN(num)) {
            console.log('金额中含有不能识别的字符',num)
            return num;
          }
          num = typeof num == 'string' ? parseFloat(num) : num // 判断是否是字符串如果是字符串转成数字
          num = num.toFixed(2); // 保留两位
          num = parseFloat(num); // 转成数字
          num = num.toLocaleString(); // 转成金额显示模式
          // 判断是否有小数
          debugger
          if (num.indexOf('.') === -1) {
            num = num + '.00';
          } else {
            console.log(num.split('.')[1].length)
            // num = num.split('.')[1].length < 2 ? '￥' + num + '0' : '￥' + num;
          }
          if(return_integer){
            console.log('返回：',num.toString().split('.')[0])
            return num.toString().split('.')[0]
          }
          console.log('返回：',num)
          return num; // 返回的是字符串23,245.12保留2位小数

        } else {
          return num = 0;
        }
      }catch (e){
        console.log(e)
        return num
      }
    },
  },
  watch:{
    value(newValue,oldValue){
      this.option.series[0].data = newValue;
      this.dom.setOption(this.option);
    }
  },
  mounted () {
    this.$nextTick(() => {
      let legend = this.value.map(_ => _.name);
      this.option.legend.data = legend;
      this.option.series[0].data = this.value;
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(this.option);
      on(window, 'resize', this.resize);
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
